<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :model-value="isShow"
      draggable
      title="参数设置"
      width="30%"
      @close="dialogClose"
    >
      <div class="content">
        <!--        //左侧列内容-->
        <div class="left">
          <!--          <el-input v-model="searchInput" placeholder="输入关键字搜索">
                      <template #append>
                        <el-button>
                          <el-icon class="el-icon&#45;&#45;right">
                            <Search/>
                          </el-icon>
                        </el-button>
                      </template>
                    </el-input>-->
          <!--          //左侧多选框-->
          <div class="left_content">
            <div class="subtitle">全部变量</div>
            <div class="check_content left_select">
              <el-checkbox-group v-model="checkList">
                <el-checkbox
                  v-for="check in leftChecked"
                  :key="check.id"
                  :label="check.id"
                  style="display: block"
                  >{{ check.cols }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <!--        //右侧内容-->
        <div class="right">
          <template v-for="(value, key, index) in getConfig" :key="key">
            <!--          //单行已选择的内容-->
            <div v-if="value[0] === '1'" class="checked_content">
              <div class="single_icon">
                <el-button
                  size="small"
                  type="primary"
                  @click="toRight(value[1], key)"
                >
                  <el-icon>
                    <ArrowRightBold />
                  </el-icon>
                </el-button>
              </div>
              <div class="single_line">
                <div class="subtitle">
                  {{ key === "destVar" ? "目标变量" : "自变量" }}({{
                    turnSelectedType(value[1]).toString()
                  }})
                </div>
                <div class="check_content single_checked">
                  <div v-for="single in destVar">{{ single.cols }}</div>
                  <!--//destVar-->
                </div>
              </div>
            </div>
            <!--          //多行已选择的内容-->
            <div
              v-else-if="value[0] === '2'"
              class="checked_content multi_content"
            >
              <div class="multi_button_group">
                <el-button-group class="multi_icon" size="small">
                  <el-button type="primary" @click="multiAlltoLeft(value[1])">
                    <el-icon>
                      <DArrowLeft />
                    </el-icon>
                  </el-button>
                  <el-button type="primary" @click="multiAlltoRight(value[1])">
                    <el-icon>
                      <DArrowRight />
                    </el-icon>
                  </el-button>
                </el-button-group>
                <el-button-group class="multi_icon" size="small">
                  <el-button type="primary" @click="selectedToLeft(value[1])">
                    <el-icon>
                      <ArrowLeftBold />
                    </el-icon>
                  </el-button>
                  <el-button type="primary" @click="selectedToRight(value[1])">
                    <el-icon>
                      <ArrowRightBold />
                    </el-icon>
                  </el-button>
                </el-button-group>
              </div>
              <div class="multi_checked_group">
                <div class="subtitle">
                  {{ key === "destVar" ? "目标变量" : "自变量" }}({{
                    turnSelectedType(value[1]).toString()
                  }})
                </div>
                <div class="check_content multi_checked">
                  <el-checkbox-group v-model="rightSelected">
                    <el-checkbox
                      v-for="check in varList"
                      :key="check.id"
                      :label="check.id"
                      style="display: block"
                      >{{ check.cols }} </el-checkbox
                    ><!--varList-->
                  </el-checkbox-group>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogClose">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";

export default {
  name: "MyDialog",
  activated() {},
  deactivated() {},
  data() {
    return {
      datasourceOfIndex: [],
      //查找inpuut
      searchInput: "",
      //左侧多选框，已选择的多选数据
      checkList: [],
      //左侧数据，渲染check
      leftChecked: [],
      //右侧第一个
      destVar: [],
      //右侧第二个
      varList: [],
      //多选框右侧多选选中的数据,
      rightSelected: [],
      //右侧的单选或多选渲染数据的来源
      rightRenderData: {},
    };
  },
  props: {
    isShow: {
      type: Boolean, //类型
      required: true, //必要性
      default: () => false, //默认值
    },
    info: {
      type: Object,
      required: true,
      default: () => {},
    },
    //数据集数据
    dataSource: {
      type: Array,
    },
    varListData: {
      type: String,
      default: "",
    },
    destVarData: {
      type: String,
      default: "",
    },
  },
  methods: {
    //关闭弹窗
    dialogClose() {
      this.datasourceOfIndex = [];
      this.checkList = [];
      this.leftChecked = [];
      this.rightSelected = [];
      // this.rightRenderData = {}
      this.$emit("dialogClose", false);
    },
    confirm() {
      const params = { varList: "", destVar: "" };
      params.varList = this.varList.map((i) => i.sort).toString();
      params.destVar = this.destVar.map((i) => i.sort).toString();
      this.$emit("getParam", params);
      this.dialogClose();
    },
    //弹窗右侧已选择，限制选择的类型
    turnSelectedType(typeArr) {
      if (typeArr.length > 0) {
        const typeStr = { 1: "字符串", 2: "数字", 3: "日期", 4: "枚举" };
        return typeArr.map((item) => {
          return typeStr[item];
        });
      }
    },
    //从左向右侧添加
    toRight(arr, key) {
      // this.rightRenderData[key].push(1)
      this.destVar = [];
      const residue = []; //剩余的
      const res = Object.assign({}, this.checkList);
      let resArr = [];
      this.checkList = [];
      // this.leftChecked = this.datasourceOfIndex.concat()
      this.leftChecked.forEach((item) => {
        if (item.id === res[0]) {
          resArr.push(item);
        } else {
          residue.push(item);
        }
      });
      if (resArr.length > 0) {
        if (arr.includes(resArr[0].colType)) {
          this.leftChecked = residue;
          // this.rightRenderData[key] = this.rightRenderData[key].concat(resArr)
          this.destVar = resArr;
        } else {
          ElMessage({
            message: `请选择${this.turnSelectedType(arr)}类型`,
            type: "error",
          });
        }
      }
    },
    //右侧多选框全部删除，到左侧
    multiAlltoLeft() {
      this.rightSelected = [];
      if (this.varList.length > 0) {
        this.leftChecked = this.sortArr(this.leftChecked.concat(this.varList));
        this.varList = [];
      }
    },
    //多选，全部向右
    multiAlltoRight(arr) {
      if (this.leftChecked.length > 0) {
        this.checkList = [];
        const residue = []; //剩余的
        const temp = this.sortArr(this.varList.concat(this.leftChecked));
        this.varList = temp.filter((i) => {
          if (arr.includes(i.colType)) {
            return true;
          } else {
            residue.push(i);
          }
        });
        this.leftChecked = residue;
      }
    },
    //右侧多选选择后移动向左侧
    selectedToLeft() {
      const residue = []; //剩余的
      const res = this.varList.filter((item) => {
        if (this.rightSelected.includes(item.id)) {
          return true;
        } else {
          residue.push(item);
        }
      });
      const temp = this.leftChecked.concat(res);
      this.varList = residue;
      this.leftChecked = this.sortArr(this.unique(temp));
      this.rightSelected = [];
    },
    //多选，添加向右侧多选
    selectedToRight(arr) {
      const residue = []; //剩余的
      const res = this.leftChecked.filter((item) => {
        if (this.checkList.includes(item.id) && arr.includes(item.colType)) {
          return true;
        } else {
          residue.push(item);
        }
      });
      const temp = this.varList.concat(res);
      this.leftChecked = residue;
      this.varList = this.sortArr(this.unique(temp));
      this.checkList = [];
    },
    //数组排序算法
    sortArr(arr) {
      return arr.sort((a, b) => a.sort - b.sort);
    },
    //去重
    unique(arr, getRepeatArr) {
      let array = [];
      let repeatArr = [];
      for (let i = 0; i < arr.length; i++) {
        if (array.indexOf(arr[i]) === -1) {
          array.push(arr[i]);
        } else {
          repeatArr.push(arr[i]);
        }
      }
      if (getRepeatArr) {
        return repeatArr;
      } else {
        return array;
      }
    },

    //判断类型
    judgeDataType(typeArr, dataType) {
      typeArr.includes(dataType[0].colType);
    },
    dealVarList(destOrList, type) {
      const valueArr = destOrList.split(",");
      const residue = [];
      const result = this.datasourceOfIndex.filter((item) => {
        if (valueArr.find((e) => e == item.sort)) {
          return true;
        } else {
          residue.push(item);
        }
      });
      this.leftChecked = this.unique([...this.leftChecked, ...residue], true);
      this[type] = result;
    },
  },
  beforeUpdate() {
    // this.leftChecked = JSON.parse(JSON.stringify(this.dataSource))
    this.datasourceOfIndex = this.dataSource.map((item, i) => {
      item.sort = i;
      return item;
    });
    this.leftChecked = this.datasourceOfIndex.concat();

    this.dealVarList(this.varListData, "varList");
    this.dealVarList(this.destVarData, "destVar");
  },
  computed: {
    getConfig() {
      if (this.info.variableSet) {
        const variableSet = JSON.parse(this.info.variableSet);
        for (const variableSetKey in variableSet) {
          this.rightRenderData[variableSetKey] = [];
        }
        return variableSet;
      }
    },
    /*    leftTempCheckOption() {
          const arr = []
          arr.concat(this.destVar, this.varList)
          const res = this.unique(arr)
          console.log(res,'leftTempCheckOption计算属性')
        }*/
  },
  watch: {
    dataSource(newValue) {
      // this.leftChecked = JSON.parse(JSON.stringify(this.dataSource))
      this.datasourceOfIndex = newValue.map((item, i) => {
        item.sort = i;
        return item;
      });
      this.leftChecked = this.datasourceOfIndex.concat();
    },
    destVarData(newValue, oldValue) {
      const residue = [];
      const valueArr = newValue.split(",");
      const result = this.datasourceOfIndex.filter((item) => {
        if (valueArr.find((e) => e == item.sort)) {
          return true;
        } else {
          residue.push(item);
        }
      });
      this.leftChecked = this.unique([...this.leftChecked, ...residue], true);
      this.destVar = result;
    },
    varListData(newValue, oldValue) {
      const valueArr = newValue.split(",");
      const residue = [];
      const result = this.datasourceOfIndex.filter((item) => {
        if (valueArr.find((e) => e == item.sort)) {
          return true;
        } else {
          residue.push(item);
        }
      });
      this.leftChecked = this.unique([...this.leftChecked, ...residue], true);
      this.varList = result;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  padding: 7px;
  justify-content: space-between;

  .subtitle {
    margin-bottom: 5px;
  }

  .check_content {
    overflow: scroll;
    border: 1px solid #000;
    border-radius: 5px;
    padding: 8px;
  }

  .left {
    width: 40%;

    .left_content {
      display: flex;
      flex-direction: column;
      height: 250px;
      margin-top: 15px;

      .left_select {
        width: 93%;
        min-height: 200px;
        flex: 1;
      }
    }
  }

  .right {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    //min-height: 250px;
    margin-top: calc(33px + 15px);
    //height: 100%;

    .multi_content {
      flex: 1;

      .multi_checked_group {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;
        max-width: 250px;

        .multi_checked {
          flex: 1;
          margin-left: 8px;
        }
      }
    }

    .checked_content {
      display: flex;

      .single_icon {
        width: 85px;
        padding-top: 33px;
        text-align: center;
      }

      .multi_button_group {
        width: 85px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .multi_icon {
          margin: 0 auto;
          display: block;
        }
      }

      .single_line {
        flex: 1;

        .single_checked {
          height: 32px;
          margin-left: 8px;
        }
      }
    }
  }
}
</style>